import React from 'react';
import { Form, Select } from 'antd';
import { IMetaFormProps, MetadataFormContext } from '../interface';
import { useGetExtraInfo } from '../hooks';

function Index(props: IMetaFormProps) {
  console.log('props', props);
  const { id, require } = props;

  const formContext: any = React.useContext(MetadataFormContext) || {};
  const extraInfo = useGetExtraInfo(formContext.fields, id, formContext.form);

  const options = React.useMemo(() => {
    const _options: { label: string; value: string }[] = [];
    if (props.enum && props.enum.length > 0) {
      props.enum.forEach((_enum: { value: string }) => {
        const obj = {
          label: _enum.value,
          value: _enum.value,
        };
        _options.push(obj);
      });
    }
    return _options;
  }, []);

  return (
    <Form.Item label={extraInfo?.label || id} name={id} rules={[{ required: require }]} help={extraInfo?.help} tooltip={extraInfo?.tooltip}>
      <Select mode={extraInfo?.mode} placeholder={extraInfo?.placeholder} options={options} allowClear />
    </Form.Item>
  );
}

export default React.memo(Index);
